/*
 * @Author: AskMeWhy 
 * @Date: 2020-06-16 23:41:05 
 * @Last Modified by: AskMeWhy
 * @Last Modified time: 2021-02-07 11:27:12
 */

$header-base-bg: #37383A;
$header-base-tag-bg: rgb(253, 199, 58);
$header-base-color: #F5F5F5;
$header-base-color-2: #F5F5F5;
$header-base-color-2-hover: #607D8B;
$header-base-transition-duration: 300ms;
$header-base-transition-timing-function: linear;

.api-list__box{
    position: fixed;
    bottom: .1rem;
    right: .1rem;
    box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.08), 0 0 6px 1px rgba(0, 0, 0, 0.08);
    width: .4rem;
    height: .4rem;
    opacity: .9;
    background: #fff;
    overflow: hidden;
    padding: .1rem;
    z-index: 2000;
    border-radius: 100%;
    transition-property: width, height,border-radius,opacity;
    transition-duration: $header-base-transition-duration;
    transition-timing-function: $header-base-transition-timing-function;
    user-select: none;
    .api-list__box-icon{
        width: 100%;
        height: 100%;
        font-size: .14rem;
        color: #17B3A3;
        @include textEllipsis();
        @include flexLayout(flex,center,center);
        opacity: 1;
        transition-property: opacity;
        transition-duration: $header-base-transition-duration;
        transition-timing-function: $header-base-transition-timing-function;
        svg{
            width: .2rem;
            height: .2rem;
        }
    }
    .api-list__box-info{
        width: 100%;
        display: none;
        opacity: 0;
        transition-property: opacity;
        transition-duration: $header-base-transition-duration;
        transition-timing-function: $header-base-transition-timing-function;
        position: relative;
    }
    &:hover,
    &.fixed,
    &.move{
        width: 1.4rem;
        height: 1.2rem;
        opacity: .9;
        border-radius: .04rem;
        .api-list__box-info{
            opacity: 1;
            display: block;
        }
        .api-list__box-icon{
            opacity: 0;
            display: none;
        }
    }
    &.fixed{
        .api-list__box-fixed-icon{
            transform: rotate(-45deg);
        }
    }
    .api-list__box-fixed-icon{
        width: .2rem;
        height: .2rem;
        position: absolute;
        top: .02rem;
        right: .04rem;
        z-index: 2;
        cursor: pointer;
        svg{
            width: .2rem;
            height: .2rem;
        }
    }
    .api-list__box-text{
        width: 100%;
        font-size: .14rem;
        height: .3rem;
        line-height: .3rem;
        color: #37383A;
        @include textEllipsis();
        .api-list__box-text-inline{
            cursor: pointer;
            @include textEllipsis();
            color: #17B3A3;
        }
        &.is-move{
            cursor: move;
        }
    }
    .api-list__box-btn{
        .el-button{
            width: 100%;
            font-size: .14rem;
        }
    }
}